<template>
    <div class="main-index">
        <el-container>
            <el-header height="49px">
                <div class="nav">
                    <menuNav></menuNav>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <myMenu></myMenu> 
                </el-aside>
                <el-main>
                    <router-view :key="`${$route.query.keywords}`"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'homeIndex',
    components: {
        myMenu: () => import('@/components/menu.vue'),
        menuNav: () => import('@/components/menuNav.vue')
    },
    data () {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
    .main-index {
        height: 100%;
        /deep/ .el-header {
            padding: 0;
            z-index: 1000;
        }
        .nav {
            width: 100%;
            position: fixed;
            top: 0;
        }
        /deep/ .el-container {
            height: 100%;
        }
        /deep/ .el-main {
            padding: 10px;
        }
    }
</style>